<template>
  <div class="tabs">
    <!--closable这里说明home是不能关闭的-->
    <el-button type="text" class="btn-con icon-l" @click="handleMove(240)">
      <i class="icon el-icon-arrow-left" />
    </el-button>
    <div class="nametit" :style="{width:this.$store.state.overwidth}" ref="tagsViews" @DOMMouseScroll="handlescroll" @mousewheel="handlescroll">
      <div class="namelength" ref="tagsCont" :style="{left: tagsContLeft + 'px'}">
        <el-tag :key="tag.name" size="medium" v-for="(tag, index) in tags" :closable="tag.path !== '/home'" :disable-transitions="false" @close="handleClose(tag, index)" @click="changeMenu(tag)" type="warning" :effect="$route.path === tag.path ? 'dark' : 'plain'">
          <span>
            <i class="iconfont icondian" style="font-size: 8px" :style="{ color: $route.path === tag.path ? '#ff9c56' : '#e8eaec' }"></i>
            {{ tag.name }}
          </span>
        </el-tag>

      </div>
    </div>
    <el-button type="text" class="btn-con icon-r" @click="handleMove(-240)">
      <i class="icon el-icon-arrow-right" />
    </el-button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState({
      tags: (state) => state.tabsList,
    }),
  },
  data() {
    return {
      tagsContLeft: 0,
    }
  },
  mounted() {
    this.addTags();

  },
  methods: {
    ...mapMutations({
      closeTab: "closeTab",
      addVisitedView: "addVisitedView",
    }),
    addTags() {
      const { name } = this.$route;
      if (name) {
        this.addVisitedView(this.$route);
      }
      return false;
    },
    //关闭标签
    handleClose(tag, index) {
      let length = this.tags.length - 1;
      //vuex调方法的另一种写法
      this.closeTab(tag);
      // 如果关闭的标签不是当前路由的话，就不跳转
      if (tag.path !== this.$route.path) {
        return;
      }
      // 关闭的标签是最右边的话，往左边跳转一个
      if (index === length) {
        this.$router.push({ path: this.tags[index - 1].path });
      } else {
        // 否则往右边跳转
        this.$router.push({ path: this.tags[index].path });
      }
    },

    //选择标签跳转路由
    changeMenu(item) {
      this.$router.push(item.path);
      this.$store.commit("selectMenu", item);
    },

    handlescroll(e) {
      const type = e.type;
      let distance = 0;
      // mousewheel非火狐浏览器鼠标滚动事件; DOMMouseScroll火狐浏览器鼠标滚动事件
      if (type === "mousewheel" || type === "DOMMouseScroll") {
        // mousewheel 事件中的 event.wheelDelta 属性值：若滚轮是向上滚动，返回值为正，反之为负；且返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120
        // DOMMouseScroll 事件中的 event.detail 属性值：返回的值，与 event.wheelDelta 正好相反，即滚轮是向上滚动，返回值为负，反之为正；返回的值，均为 3 的倍数，即：幅度大小 = 返回的值 / 3
        distance = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40;
      }
      this.handleMove(distance);
    },
    handleMove(offset) {
      const viewWidth = this.$refs.tagsViews.offsetWidth;
      const contWidth = this.$refs.tagsCont.offsetWidth;
      if (offset > 0) {
        this.tagsContLeft = Math.min(0, this.tagsContLeft + offset);
      } else {
        if (viewWidth < contWidth) {
          if (this.tagsContLeft < -(contWidth - viewWidth)) {
          } else {
            this.tagsContLeft = Math.max(
              this.tagsContLeft + offset,
              viewWidth - contWidth
            );
          }
        } else {
          this.tagsContLeft = 0;
        }
      }
    },
  },
};
</script>

<style scoped>
.tabs {
  padding: 5px;
  background: #f7f7f7;
  position: fixed;
  width: 100%;
  height: 32px;
  z-index: 999;
}

.nametit {
  overflow: hidden;
  height: 32px;
  position: relative;
  float: left;
  left: 10px;
}
.namelength {
  height: 32px;
  overflow: visible;
  position: absolute;
  white-space: nowrap;
  transition: left 0.5s ease;
}
.tabs .el-tag {
  margin-right: 15px;
  cursor: pointer;
}

.el-tag--medium {
  height: 32px;
  line-height: 32px;
}
.el-tag {
  border-radius: 3px;
}
/* 没选中 */
.el-tag--plain.el-tag--warning {
  background-color: #fff;
  border: none;
  color: #555;
}
/* 选中 */
.el-tag--dark.el-tag--warning {
  background-color: #fff;
  border: none;
  color: #000;
}
.tabs >>> .el-tag--dark.el-tag--warning .el-tag__close {
  color: #ff9c56 !important;
}
.tabs >>> .el-tag--dark.el-tag--warning .el-tag__close:hover {
  background-color: #ff9c56 !important;
  color: #fff !important;
}
.icon-l {
  margin-top: -5px;
  float: left;
  background: #fff;
  width: 33px;
  margin-left: -6px;
  border-radius: 0;
  height: 42px;
  font-size: 20px;
  border-top: solid 1px #f0f0f0;
  border-bottom: solid 1px #f0f0f0;
}
.icon-r {
  float: right;
  right: 0;
  position: fixed;
  background: #fff;
  margin-top: -5px;
  height: 42px;
  width: 33px;
  border-top: solid 1px #f0f0f0;
  border-bottom: solid 1px #f0f0f0;
  font-size: 20px;
}
</style>
